<script setup lang="ts">
import type {FormInstance, FormRules} from "element-plus";

const formRef=ref<FormInstance>()
const login=useLoginStore()
const router=useRouter();
const rules=reactive<FormRules>({
  user_account: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ],
})
const form = reactive({
  user_account: '',
  password: '',
  code:'',
  random_str:'',
})
const {data:random,refresh}=await useServerGet('/tools/getRandomCode')
const submit=()=>{
  formRef.value?.validate(async (valid,invalidFields) => {
    if (valid) {
      form.random_str=random?.value?.data?.random_str;
      const {data,code}=await usePost('/backend/login',form);
      if(code==200){
        formRef.value?.resetFields();
        formRef.value?.clearValidate();
        login.setToken(data?.token);
        data.user.id=data.user.admin_id;
        data.user.real_name=data.user.user_name;
        login.setInfo(data?.user);
        login.setIsAdmin(true);
        ElMessage.success('登录成功');
        router.push('/index.html');
      }else{
        refresh&&refresh();
      }
    } else {
      showFieldsError(invalidFields);
    }

  });
}
</script>

<template>
  <div>
    <div class="w-[1200px] mx-auto my-5">
      <el-card class="my-register h-[630px]">
        <div class="grid grid-cols-2 gap-10">
          <div>
            <div class="h-full">
              <img src="/imgs/reg_bg.jpeg" alt="注册图片" class="h-2/3">
            </div>
          </div>
          <div class="w-4/5">
            <div class="text-xl py-4 flex">
              <div class="text-[var(--el-color-primary)] text-3xl">管理员用户登录</div>
            </div>
            <el-form class="bg-white" label-suffix="：" label-width="120" size="large" :model="form" ref="formRef" :rules="rules">
              <el-form-item label="用户名" prop="email">
                <el-input v-model="form.user_account"  clearable placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <div class="flex w-full">
                  <el-input type="password" v-model="form.password" clearable placeholder="请输入密码"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="验证码" prop="code">
                <div class="flex w-full">
                  <el-input v-model="form.code" class="w-3/5" clearable  placeholder="请输入验证码" size="large"></el-input>
                  <img :src="random?.data?.random_code_img" class="h-10 ml-2" @click="refresh" alt="随机码"/>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submit" size="large">登录</el-button><el-button size="large"><NuxtLink to="/backReg.html">注册</NuxtLink></el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>